<template>
  
    <view class="scroll-view-container">
      <scroll-view class="" scroll-y :style="{height: wh + 'px'}">
        <view class="headcolor">  </view>
        <!-- //头部月嫂详情介绍 -->
        <view class="top">
          <view class="imgbox">
            
         
          <view class="img">
            
            <view class="img-left">
           <image class="btfwm" src='@/static/imges/yuesao.jpg'></image>
            </view>
            <view class="img-right">
              <view class="people-name">
                张丽丽
                <uni-fav class='nickname' :content-text="contentText3" star="flase" circle="true"/>
                <view class="people-age">
                  湖南长沙  |  36岁  |  7年经验
                </view>
              </view>
            </view>
          </view>
          <view class="imgtext">
            <view class="company-title">
              注册公司：湖南前海优家网络科技有限公司
              <view class="companny-text">
                职业：保姆 月嫂 育婴师 早教/托育
              </view>
            </view>
            <view class="id-title">
            <uni-icons class="id-verify" type="checkbox-filled" size="20"></uni-icons>身份证信息已核实
            </view>
          </view> 
        </view>
          <view class="attention-button">
          			<view class="example-body">
                  <!--按钮区域 -->
          				<uni-fav class="gzbtn" :checked="checkList[0]" :content-text="contentText0" @click="favClick(0)" star="flase" circle="true"/>
                  <uni-fav class="dhbtn" :checked="checkList[1]" :content-text="contentText1" @click="favClick(1)" star="flase"circle="true"/>
                  <uni-fav clsaa="wxbtn" :checked="checkList[2]" :content-text="contentText2" @click="favClick(2)" star="flase"circle="true"/>
          			</view>
          </view>
        </view>
        <!-- 中部介绍 -->
        <view class="middle">
          <view class="premary-skill-text">
            主要技能
          </view>
          <view class="premary-skill">
            <uni-fav class='nickname' :content-text="contentText4" star="flase" circle="true"/>
            <uni-fav class='nickname' :content-text="contentText5" star="flase" circle="true"/>
            <uni-fav class='nickname' :content-text="contentText6" star="flase" circle="true"/>
          </view>
        <view class="resume">
          <h1>个人简介</h1>
          <p class="resume-text">2019年8月在湖南女子学院优家培训平台以优异的成绩，
          荣获中级育婴结业证书，并获得被动操和实操能手荣誉证书。参加国家职业资格证考试，获得国家职业资格证书育婴员证，会做精致的辅食，婴儿常见疾病的护理，宝宝哄睡，以及良好的生活习惯。擅长科学育儿，会新生儿的黄疸辩证和护理，会脐带消毒和护理，臀部护理，洗澡抚触，婴儿主被动操，穿脱衣服，做简单早教。其他技能：亲和力非常不错，形象气质很好，积极主动，能很好的与他人沟通，做事细心，勤快，有耐心，敬业，能吃苦。普通话标准，有爱心，曾在私塾教书2年，对胎婴幼儿教育有一定的认识。有带过一个1岁左右的女宝宝到3岁多上幼儿园的经验，做饭菜好吃，可以兼做饭菜，家务。</p>
        </view>
        <view class="resume">
          <h1>个人简介</h1>
         <view class="resume-text">
            <p>任职公司：湖南前海优家网络科技有限公司</p>
             <p>籍贯民族：汉族</p>
              <p>生肖属相：蛇</p>
               <p>星座：摩羯座（12.22~1.19）</p>
                <p>出生日期：1977-12-23</p>
                 <p>学历：中专</p>
           </view>
        </view>
        <view class="id-information">
          <view class="resume">
            <h1>证件信息</h1>
            </view>
            <view class="id-information-photo">
            <view class="id-information-photo1">
              证件照片
            </view>
            <view class="id-information-photo1">
              证件照片
            </view>
            <view class="id-information-photo1">
              证件照片
            </view>
            </view>
            <view class="resume">
              <h1>证件信息</h1>
              </view>
              <view class="id-information-photo">
              <view class="id-information-photo1">
                证件照片
              </view>
              <view class="id-information-photo1">
                证件照片
              </view>
              <view class="id-information-photo1">
                证件照片
              </view>
              </view>
        </view>
        </view>
        <!-- 底部介绍 -->
        <view class="buttom">
          <view class="one">
             <uni-icons type="chat-filled" size="30"color="rgb(151, 145, 145)"></uni-icons>
             <view class="">
             评价
             </view>
          </view>
         <view class="two">
            <uni-icons type="link" size="30" color="rgb(151, 145, 145)"></uni-icons>
            <view class="">
              分享链接
            </view>
         </view>
         <view class="three">
            <uni-icons  type="weixin" size="30"color="rgb(151, 145, 145)"></uni-icons>
           <view class="">
             微信联系
           </view>
         </view>
         <view class="fore">
             <uni-icons   type="phone-filled" size="30"color="rgb(151, 145, 145)"></uni-icons>
             <view class="">
               电话联系
             </view>
         </view>
        </view>
        </scroll-view>
      </view>
  
</template>

<script>
  export default {
    data() {
    			return {
    				checkList: [ false,false,false,],
    				contentText0: {
    					contentDefault: '关注',
    					contentFav: '已关注'
    				},
            contentText1: {
            	contentDefault: '电话联系',
            	contentFav: '已电话联系'
            },
            contentText2: {
            	contentDefault: '微信联系',
            	contentFav: '已微信联系'
            },
            contentText3: {
            	contentDefault: '二星育婴师',
            },
            contentText4: {
            	contentDefault: '做饭',
            },
            contentText5: {
            	contentDefault: '洗衣服',
            },
            contentText6: {
            	contentDefault: '催眠',
            },
    			}
    		},
        methods: {
        			favClick(index) {
        				this.checkList[index] = !this.checkList[index]
        				console.log(this.checkList[index]);
        				this.$forceUpdate()
        			}
        		}
  }
</script>

<style lang="scss">
  // 头部区域按钮部分
.scroll-view-container{
  display: flex;
  background:rgb(232,232,232) ;
  position: absolute;
  .top{
    display: flex;
    height: 416rpx;
    width: 684rpx;
   background: rgb(250, 250, 250);
    margin: 0 30rpx 0px 30rpx;
     position: relative;
     top:-36rpx
  }
  
  .headcolor{
    height: 56rpx;
    width: 100%;
    background:#3F51B5
  }
  
  .attention-button{
    width: 178rpx;
   
    background-color: rgb(250, 250, 250)
  }
  .example-body{
     padding: 26rpx 26rpx 26rpx 26rpx;
     .gzbtn{
      margin-bottom:208rpx ;
      display: block;
     }
     .dhbtn{
       margin-bottom:16rpx ;
       display: block;
     }
  }
  // 头部区域 月嫂头部部分
  .imgbox{
    flex:1,
  }
  .img{
    display: flex;
  
  }
  .img-right{
    flex:1
  }
  .nickname{
    margin-top: 16rpx;
    display: block;
    margin:19rpx;
  }
  .people-name{
    margin-top:24rpx ;
    margin-bottom: 18rpx;
    font-size: 22rpx;
  }
  .people-age{
    margin-top:16rpx ;
    font-size: 18rpx;
  }
  .btfwm{
    width: 154rpx;
    height: 144rpx;
    margin: 28rpx 36rpx 24rpx 36rpx;
  }
  .company-title{
    height: 34rpx;
    width: 100%;
    font-size: 24rpx;
    line-height: 36rpx;
    color: rgb(151, 145, 145);
   margin: 14rpx 14rpx 14rpx 30rpx;
  }
  .company-text{
    margin: 14rpx 14rpx 14rpx 30rpx;
    height: 34rpx;
    width: 100%;
  }
  .id-title{
    line-height: 145rpx;
    margin: 14rpx 14rpx 14rpx 30rpx;
  }
  .id-verify text{
    color: #3a72e9;
  }
  // 中部区域
  .middle{
    height: 1626rpx;
    width: 684rpx;
     background: rgb(250, 250, 250);
     margin: 0 30rpx 38rpx 30rpx;
  }
  .premary-skill{
    display: flex;
    height: 100rpx;
    margin-top: 24rpx;
    margin-left:40rpx;;
  }
  .premary-skill-text{
    line-height: 90rpx;
    height: 40rpx;
    margin-left:58rpx;;
  }
  .resume{
    line-height: 76rpx;
    margin-top: 24rpx;
    margin-left:58rpx;
    margin-right: 58rpx;
  }
  .resume-text{
    font-size: 12px;
    line-height: 34rpx;
    color: rgb(151, 145, 145);
  }
  .id-information-photo{
    height: 148rpx;
    display: flex ;
    justify-content:space-around
  }
  .id-information-photo1{
    width: 200rpx;
   border: black 1px solid;
   line-height: 148rpx;
   text-align: center;
   background: #e8e8e8;
  }
  // 底部区域
  .buttom{
    width: 100%;
    height: 134rpx;
    background: rgb(250, 250, 250);
    display: flex;
    justify-content:space-around;
    color: rgb(151, 145, 145);
  }
  .one{
  padding-top: 30rpx;
    display: block;
    text-align: center;
    font-size: 12px;
  }
  .two{
    padding-top: 30rpx;
    display: block;
    text-align: center;
     font-size: 12px;
  }
  .three{
  padding-top: 30rpx;
    display: block;
    text-align: center;
     font-size: 12px;
  }
  .fore{
   padding-top: 30rpx;
    display: block;
    text-align: center;
     font-size: 12px;
  }
}
</style>
